<template>
  <div>
    <div class="title">数据报表</div>

    <el-card>
      <div class="big-box">

        <div class="image-bg">
          <el-image :src="src" style="width: 100%;height: 100%"></el-image>
        </div>
        <div class="newCharts1" id="newCharts1"></div>
      </div>
    </el-card>
    <el-card>
      <div class="small-box">
        <div class="newCharts2" id="newCharts2">花卉销量排行</div>
        <div class="newCharts3" id="newCharts3">数据报表3</div>
        <div class="newCharts4" id="newCharts4">系统用户注册折现图</div>
      </div>
    </el-card>
  </div>

</template>

<script>

export default {
  name: 'dataAnalyse',
  components: {},
  data() {
    return {
      src: 'http://localhost:8081/api/image/download?name=bg-finish.png'
    }
  },
  computed: {},
  mounted() {
    this.setNewCharts1()
    this.setNewCharts2()
    this.setNewCharts3()
    this.setNewCharts4()
  },
  methods: {

    setNewCharts4() {
      let XData = []
      let YData= []
      let option = {
        title: {
          text: "注册人数折现图",
          subtext: '过去七天用户注册数量',
          left: 'center',
          textStyle: {
            //字体大小
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('newCharts4'));//也可以通过$refs.newCharts的方式去获取到dom实例。
      this.$http.get("/echarts/four").then(res => {
        console.log(res.data.data)
        XData =res.data.data.xAxis
        YData =res.data.data.yAxis
        option.xAxis.data = XData
        option.series[0].data = YData
        // option.dataset[0].source = res.data.data
      });

      myChart.resize();
      setTimeout(() => {
        myChart.setOption(option);
      }, 1000);
    },
    setNewCharts3() {
      let XData = []
      let YData= []
      let option={
        title: {
          text: "订单数量柱状图",
          subtext: '过去七天用户下单数量',
          left: 'center',
          textStyle: {
            //字体大小
            fontSize: 16
          }
        },
        color: ['#61a0a8', '#2f4554', '#61a0a8'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#47C3FF'
            }
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('newCharts3'));//也可以通过$refs.newCharts的方式去获取到dom实例。
      this.$http.get("/echarts/three").then(res => {
        console.log(res.data.data)
        XData =res.data.data.xAxis
        YData =res.data.data.yAxis
        option.xAxis.data = XData
        option.series[0].data = YData
        // option.dataset[0].source = res.data.data
      });

      myChart.resize();
      setTimeout(() => {
        myChart.setOption(option);
      }, 1000);
    },
    setNewCharts2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('newCharts2'));//也可以通过$refs.newCharts的方式去获取到dom实例。
      let option = {
        title: {
          text: '花卉销售排行',
          subtext: '花卉/数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        dataset: [
          {
            dimensions: ['name', 'score'],
            source: [
            ]
          },
          {
            transform: {
              type: 'sort',
              config: { dimension: 'score', order: 'desc' }
            }
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {},
        series: {
          type: 'bar',
          encode: { x: 'name', y: 'score' },
          datasetIndex: 1
        }
      };

      this.$http.get("/echarts/two").then(res => {
        // console.log(res.data.data)
        option.dataset[0].source = res.data.data.slice(0, 7);
        // option.dataset[0].source = res.data.data
      });
      myChart.resize();
      setTimeout(() => {
        myChart.setOption(option);
      }, 1000);
    },
    setNewCharts1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('newCharts1'));//也可以通过$refs.newCharts的方式去获取到dom实例。
      let option = {
        title: {
          text: '花卉类型比列',
          subtext: '种类/占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      this.$http.get("/echarts/one").then(res => {
        // console.log(res.data.data)
        option.series[0].data = res.data.data
      });
      myChart.resize();
      setTimeout(() => {
        myChart.setOption(option);
      }, 1000);
    }
  },
  watch: {}

}
</script>


<style scoped lang="scss">


.title {
  font-family: '微软雅黑', Arial, sans-serif;
  font-size: 30px;
  color: #333333; /* 使用你喜欢的颜色 */
  text-transform: uppercase; /* 将标题转换为大写 */
  letter-spacing: 1px; /* 增加字母间距 */
  margin-bottom: 10px; /* 调整标题与下方内容的间距 */
  text-align: center; /* 居中标题 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 添加一点阴影效果 */
}

.big-box {
  //border: 1px solid red;
  height: 50vh;
  display: flex;
  justify-content: space-between;
  padding: 30px;
  div {
    width: 47%;
    //border: 1px solid blue;
    padding-top: 30px;
    align-items: center;
  }
}

.small-box {
  margin-top: 20px;
  //border: 1px solid red;
  height: 30vh;
  display: flex;
  justify-content: space-between;
  //padding: 10px;

  div {
    width: 30%;
    //border: 1px solid blue;
  }
}
</style>

